<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0  maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>成交记录</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="icon_font/iconfont.css">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
    body {
        background-color: #eff3f6
    }

    header {
        background-color: #fff;
        border-bottom: 1px solid #eff3f6;
        padding: 10px;
    }

    header .white {
        font-size: 26px;
    }

    header h3 {
        margin: 0;
        position: absolute;
        top: 3%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 22px;
    }

    .group {
        background-color: #fff;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #eff3f6;;
    }

    .search {
        background-color: #EFF3F6;
        border: none;
        border-radius: 20px;
        width: 260px;
        padding-left: 50px;
    }

    .spng {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 4px;
        left: 16px;
    }

    .btnsearch {
        border: none;
        background-color: #50D2C2;
        color: #fff;
        border-radius: 4px;
        padding: 0px 20px;
    }
    ul {
        list-style: none;
        display: flex;
        justify-content: space-between;
        width: 100%;
        height:100%;
        padding: 0;
        margin: 0;
        font-size: 14px;
    }
</style>

<body>
    <header>
        <i class="iconfont white  icon-zuojiantou"></i>
        <h3>成交记录</h3>
    </header>
    <div class="group">
        <div style="position: relative;">
            <img src="img/search.png" alt="" class="spng">
            <input type="text" placeholder="搜索房源编号" class="search">
        </div>
        <button class="btnsearch">搜索</button>
    </div>
    <div class="group" style="border: none;">
        <ul>
            <li>编号</li>
            <li>跟进结果</li>
            <li>地址</li>
            <li>业主</li>
            <li>客户经理</li>
            <li>渠道费</li>
        </ul>
    </div>
    <div class="group" >
        <text style="margin: auto; color: #ccc;">暂无成交记录</text>
    </div>
</body>
<script>

</script>

</html>